import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = { id: nanoid(), name, age };
    this.props.add(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    // 此时的person为通过redux存储的person状态(state)
    const { person, count } = this.props
    return (
      <div>
        <h1>Person组件</h1>
        <h4>Count组件求和为:{count}</h4>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            person.map(pObj => {
              return (<li key={pObj.id}>{`名字:${pObj.name} -- 年龄:${pObj.age}`}</li>)
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({ person: state.person, count: state.count }),
  {
    add: createAddPersonAction
  }
)(Person)